<template>
  <div class="channel">
    <van-icon name="revoke" class="revert" @click="$router.go(-1)" />
    <van-tabs v-model="channename">
      <van-tab
        v-for="item in channelArr"
        :key="item.id"
        :title="item.name"
        :name="item.name"
      >
        <h3>{{ item.name }}</h3>
        <p>
          {{ item.front_name }}
        </p>
        <Channelnum :name="item.id" ></Channelnum>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Channelnum from "@/views/Channelnum";
import { getchannel, searchgoods } from "@/utils/https";
export default {
  name: "channel",
  data() {
    return {
      channelArr: [], //分类导航数据
      channename: "", //默认选中分类
      id: "",
    };
  },
  computed: {},
  components: {
    Channelnum,
  },
  methods: {
    getdatail() {
      searchgoods({id:this.id}).then((res) => {
        this.channelArr = res.data.data.filterCategory;
        console.log("ddd", res);
      });
    },
  },
  created() {
    console.log(this.$router);
    this.id = this.$router.history.current.query.name;
    getchannel({
      id: this.id,
    }).then((res) => {
      console.log(res);
      this.channename = res.data.data.currentCategory.name;
    });
    this.getdatail();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.channel {
  .revert {
    position: fixed;
    top: 40px;
    z-index: 10;
  }
  /deep/.van-tabs__wrap {
    position: sticky;
    top: 0;
  }
  div {
    text-align: center;
    h3 {
      font-size: 40px;
      line-height: 50px;
    }
    p {
      font-size: 20px;
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
